<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-04-25 21:18:06
 * @LastEditTime: 2023-05-18 17:15:06
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\views\SysManage\SysLog\index.vue
 * Copyright 版权声明
-->
<template>
    <standard-page
      ref="crudPage"
      v-model:page="page"
      v-model:listData="listData"
      v-model:btnLoading="btnLoading"
      v-model:listLoading="listLoading"
      :options="options"
      @on-load-data="onLoadData"
      @search-change="searchChange"
      @search-reset="resetChange"
      @refresh-change="refreshChange"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @selection-change="selectionChange"
    >
    <!-- 自定义操作按钮 -->
    <template #handleBtns>
    </template>
    <!-- 状态 列卡槽 -->
    <template #column_type="scope">
      <template v-for="(item, index) in LOG_TYPE_ENUM" :key="index">
        <template v-if="scope.row.type === item.value">
          <el-tag :type="item.type">{{item.label}}</el-tag>
        </template>
      </template>
    </template>
  </standard-page>
</template>

<script>
import { getList, deleteSave } from '@/api/SysManage/sysLog'
import { mapGetters } from 'vuex'
// 标准增删改查页面 - 组件
import StandardPage from '@/components/StandardPage/index.vue'
import { LOG_TYPE_ENUM } from '@/config/views/SysManage/SysLog'

// 当前模块名称
const MODULE_VALUE = 'SYS_LOG_MANAGE'

export default {
  name: 'SysLog',
  computed: {
    ...mapGetters([
      'drawerVisible'
    ])
  },
  components: {
    StandardPage
  },
  data() {
    return {
      // 按钮 loading 状态
      btnLoading: false,
      // 列表 loading 状态
      listLoading: false,
      // 分页信息
      page: {
        pageNum: 1,
        total: 110,
        pageSize: 10
      },
      // 查询条件
      listQuery: {},
      // 数据
      listData: [],
      options: {
        MODULE_VALUE,
        // 表格操作列 - 新建按钮是否展示
        showCreateBtn: false,
        // 表格操作列 - 详情按钮是否展示
        showDetailBtn: true,
        // 表格操作列 - 编辑按钮是否展示
        showUpdateBtn: false,
        // 表格操作列 - 删除按钮是否展示
        showDeleteBtn: false,
        createDrawerWidth: '50%', // 新建 抽屉弹窗宽度
        updateDrawerWidth: '50%', // 编辑 抽屉弹窗宽度
        detailDrawerWidth: '30%', // 详情 抽屉弹窗宽度
        // 页面title, showHeader 为 true 时生效， 默认值： 页面标题
        title: 'CURD示例页面',
        // 结果展示区标题
        // resultTitle: '列表',
        // 是否展示 header， 默认值： true
        showHeader: true,
        // 是否展示 查询条件区域, 默认值 ： true
        showSearch: true,
        // 搜索条件标题的宽度, 默认值： 110px
        searchLabelWidth: '110px',
        // 搜索的文字， 默认值： 查询
        searchBtnText: '查询',
        // 清空的文字， 默认值： 重置
        emptyBtnText: '重置',
        // 是否展示 查询条件区域 - 【展开/折叠】 按钮， 默认值： true
        searchShowMoreBtn: false,
        // 是否展示 分页， 默认值： true
        showPage: true,
        // 是否显示表格 行多选， 默认值： false
        selection: false,
        // 是否显示表格 索引/序号 列， 默认值： false
        index: false,
        // 设置表格的序号的标题,默认为： 序号
        indexLabel: '序号',
        // 字段配置
        column: [
          {
            label: '类型',
            prop: 'type',
            width: 80,
            align: 'center',
            search: true, // 是否在搜索区作为查询条件展示
            searchType: 'select', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            dictData: LOG_TYPE_ENUM // searchType / formType 如果为 checked 、 radio 、 select 等需要枚举的配置此值
          },
          {
            label: '操作方式',
            prop: 'method',
            minWidth: 90, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            width: 90,
            align: 'center' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入操作方式', // 输入框占位文本
            //searchTip: '操作方式', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '请求URI',
            prop: 'requestUri',
            minWidth: 140, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入请求URI', // 输入框占位文本
            //searchTip: '请求URI', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '用户代理',
            prop: 'userAgent',
            minWidth: 260, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入用户代理', // 输入框占位文本
            //searchTip: '用户代理', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '操作IP地址',
            prop: 'remoteIp',
            width: 140,
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入操作IP地址', // 输入框占位文本
            //searchTip: '操作IP地址', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '方法类',
            prop: 'methodClass',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入方法类', // 输入框占位文本
            //searchTip: '方法类', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '方法名',
            prop: 'methodName',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入方法名', // 输入框占位文本
            //searchTip: '方法名', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '操作提交的数据',
            prop: 'params',
            minWidth: 140, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入操作提交的数据', // 输入框占位文本
            //searchTip: '操作提交的数据', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '执行时间',
            prop: 'time',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入执行时间', // 输入框占位文本
            //searchTip: '执行时间', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '创建者',
            prop: 'createBy',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入创建者', // 输入框占位文本
            //searchTip: '创建者', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '创建时间',
            prop: 'createTime',
            width: 160,
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入创建时间', // 输入框占位文本
            //searchTip: '创建时间', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '异常信息',
            prop: 'message',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入异常信息', // 输入框占位文本
            //searchTip: '异常信息', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '编号',
            prop: 'id',
            width: 180,
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入编号', // 输入框占位文本
            //searchTip: '编号', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '租户ID',
            prop: 'tenantId',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入租户ID', // 输入框占位文本
            //searchTip: '租户ID', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '服务ID',
            prop: 'serviceId',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入服务ID', // 输入框占位文本
            //searchTip: '服务ID', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '服务器名',
            prop: 'serverHost',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入服务器名', // 输入框占位文本
            //searchTip: '服务器名', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '服务器IP地址',
            prop: 'serverIp',
            minWidth: 120, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入服务器IP地址', // 输入框占位文本
            //searchTip: '服务器IP地址', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '服务器环境',
            prop: 'env',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入服务器环境', // 输入框占位文本
            //searchTip: '服务器环境', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '日志标题',
            prop: 'title',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入日志标题', // 输入框占位文本
            //searchTip: '日志标题', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '堆栈',
            prop: 'stackTrace',
            minWidth: 100, // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            align: 'left' // 水平对称方式， 默认： left ， 枚举：left、center、right
            //search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            //searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            //searchPlaceholder: '请输入堆栈', // 输入框占位文本
            //searchTip: '堆栈', // 辅助提示语
            //searchTipPlacement: 'left' // 提示语的方向
          },
          {
            show: false, // 在列表中不展示此列， 一般用于在列表不展示，在查询条件中展示
            label: '时间',
            prop: 'dateRange',
            search: true, // 是否在搜索区作为查询条件展示
            searchType: 'daterange' // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
          }
        ]
      },
      // 状态 枚举
      LOG_TYPE_ENUM
    }
  },
  watch: {
  },
  created() {
  },
  unmounted() {
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
    // 加载数据
    onLoadData(params) {
      // console.log('--params--', params)
      // console.log('--this.page--', this.page)
      if (typeof params !== 'undefined') {
        this.listQuery = Object.assign({}, this.listQuery, params.query)
      }

      // 查询条件处理
      const queryParams = JSON.parse(JSON.stringify(this.listQuery))
      if (queryParams.dateRange !== null && typeof queryParams.dateRange !== 'undefined') {
        if ((queryParams.dateRange).length > 0) {
          queryParams.startTime = queryParams.dateRange[0]
          queryParams.endTime = queryParams.dateRange[1]
          delete queryParams.dateRange
        } else {
          queryParams.startTime = ''
          queryParams.endTime = ''
          delete queryParams.dateRange
        }
      }

      this.btnLoading = true
      this.listLoading = true
      return getList({
        current: this.page.pageNum,
        size: this.page.pageSize,
        ...queryParams
      }).then(response => {
        // this.listData = response.data.lstItem || []
        // this.page.total = response.data.page.total || 0

        this.listData = response.data.records || []
        this.page.total = response.data.total || 0

        this.btnLoading = false
        this.listLoading = false
      }).catch(err => {
        err
        this.btnLoading = false
        this.listLoading = false
      })
    },
    // 点击搜索后执行方法
    searchChange(params) {
      console.log('点击搜索按钮回调', params)
    },
    // 点击清空的执行方法
    resetChange(params) {
      console.log('清空回调', params)
    },
    // 刷新数据
    refreshChange(params) {
      console.log('刷新数据', params)
    },
    // 新增数据
    rowSave(params) {
      console.log('新增数据', params)
    },
    // 修改数据
    rowUpdate(params) {
      console.log('修改数据', params)
    },
    // 删除数据
    rowDel(params) {
      // console.log('删除数据', params)
      deleteSave({
        id: params.data.id
      }).then(response => {
        this.$notify({
          title: '提示',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.onLoadData()
      }).catch(err => {
        err
      })
    },
    // selectionChange
    selectionChange(data) {
      console.log('selectionChange:', data)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
